<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
Set the `vertical` attribute (boolean) to arrange vertically instead.

`<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
it's children.

One arranged node may be marked as elastic by giving it a `flex`
attribute (boolean).

You may remove a node from layout by giving it a `nolayout`
attribute (boolean).

CSS Notes:

`padding` is ignored on the parent node.
`margin` is ignored on arranged nodes.
`min-width` is ignored on arranged nodes, use `min-width` on the parent node 
instead.

Example: 

Arrange three `div` into columns. `flex` attribute on Column Two makes that
column elastic.

     <core-layout-trbl></core-layout-trbl>
     <div>Column One</div>
     <div flex>Column Two</div>
     <div>Column Three</div>

Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's children.

If body has width 52 device pixels (in this case, ascii characters), call that 52px.
Column One has it's natural width of 12px (including border), Column Three has it's
natural width of 14px, body border uses 2px, and Column Two automatically uses the
remaining space: 24px.

     |-                    52px                        -| 
     ----------------------------------------------------
     ||Column One||      Column Two      ||Column Three||
     ----------------------------------------------------
      |-  12px  -||-     (24px)         -||    14px   -|

As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
No javascript is used during parent resizing, for best performance. 

Changes in content or sibling size are not handled automatically. 

     ----------------------------------------------------------------
     ||Column One|             Column Two             |Column Three||
     ----------------------------------------------------------------

     --------------------------------------
     ||Column One|Column Two|Column Three||
     --------------------------------------

Arrange in rows by adding the `vertical` attribute.

Example:

     <core-layout-trbl vertical></core-layout-trbl>
     <div>Row One</div>
     <div flex>Row Two</div>
     <div>Row Three</div>

This setup will cause Row Two to stretch to fill the container.

     -----------             -----------
     |---------|             |---------|
     |         |             |         |
     |Row One  |             |Row One  |
     |         |             |         |
     |---------|             |---------|
     |         |             |         |
     |Row Two  |             |Row Two  |
     |         |             |         |
     |---------|             |         |
     |         |             |         |
     |Row Three|             |         |
     |         |             |---------|
     |---------|             |         |
     -----------             |Row Three|
                             |         |
                             |---------|
                             |---------|

Layouts can be nested arbitrarily.

     <core-layout-trbl></core-layout-trbl>
     <div>Menu</div>
     <div flex>
        <core-layout-trbl vertical></core-layout-trbl>
        <div>Title</div>
        <div>Toolbar</div>
        <div flex>Main</div>
        <div>Footer</div>
     </div>

Renders something like this

     --------------------------------
     ||Menu     ||Title            ||
     ||         ||-----------------||
     ||         ||Toolbar          ||
     ||         ||-----------------||
     ||         ||Main             ||
     ||         ||                 ||
     ||         ||-----------------||
     ||         ||Footer           ||
     --------------------------------

@group Polymer Core Elements
@element core-layout-trbl
-->
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-layout-trbl" attributes="vertical">

  <template>

    <style>
      :host {
        display: none;
      }
    </style>

  </template>

  <script src="core-layout-trbl.js"></script>

</polymer-element>
